<template>
    <div class="good-list" >
        <!-- <router-link class="good-item" v-for="val in list" :key="val.id" :to="`/home/goodsdetail/${val.id}`">
            <img :src="val.img_url">
            <h1 class="text">{{val.title}}</h1>
            <div class="info">
                <div class="price">
                    <span class="new">￥{{val.market_price}}</span>
                    <span class="old">￥{{val.sell_price}}</span>
                </div>
                <div class="price-cell">
                    <span>热卖中</span>
                    <span>剩{{val.stock_quantity}}件</span>
                </div>
            </div>           
        </router-link>  -->
        <!-- 在网页中有两种跳转方式 -->
        <!-- 第一种：使用a标签的形式叫做标签跳转 -->
        <!-- 第二种：使用window.location.href的形式，叫做编程式导航 -->
         <div class="good-item" v-for="val in list" :key="val.id" @click="goDetail(val.id)">
            <img :src="val.img_url">
            <h1 class="text">{{val.title}}</h1>
            <div class="info">
                <div class="price">
                    <span class="new">￥{{val.market_price}}</span>
                    <span class="old">￥{{val.sell_price}}</span>
                </div>
                <div class="price-cell">
                    <span>热卖中</span>
                    <span>剩{{val.stock_quantity}}件</span>
                </div>
            </div>           
        </div>
        <mt-button type="danger" size="large"  @click="getMore1">加载更多</mt-button>               
    </div>
</template>
<script>
    import axios from 'axios'
    import {Toast} from 'mint-ui'
    export default {
        data(){
            return {
                number:1,
                list:[]
            }
        },
        created() {
            this.getgoodlist();
            // this.number++
        },
        methods:{
            getgoodlist(){
                axios({
                    method:'get',
                    url:`http://www.liulongbin.top:3005/api/getgoods?pageindex=${this.number}`
                }).then(res=>{
                    if(res.data.status===0){
                    this.list=this.list.concat(res.data.message)
                    }
                    else{
                        Toast("获取数据失败")
                    }
                })
            },
            getMore1() {
                this.number++
                this.getgoodlist()
                
            },
            goDetail(id){
                // 使用js形式进行路由导航
                // 注意:一定要区分this.$route和this.$router这两个对象
                // 其中：this.$route是路由参数对象，所有的路由中的参数，params，query都属于它
                // 其中：this.router是一个路由导航对象，用它可以方便的使用js代码，实现路由的前进，后退，跳转到新的URL地址
                // 第一种：
                // this.$router.push(`/home/goodsdetail/${id}`)
                // 第二种：传递对象
                // this.$router.push({path:`/home/goodsdetail/${id}`})
                // 第三种：传递命名路由
                this.$router.push({name:"goodlist",params:{id}})


            }
        }
    }
</script>
<style lang="scss" scoped>
.good-list{
    display: flex;
    flex-wrap: wrap;
    padding: 7px;
    margin-top: 17px;
    justify-content: space-between;
    margin-bottom: 20px;
}
.good-item{
   width: 49%;
   border: 1px solid #ccc;
   box-shadow: 0 0 8px #ccc;
   margin:3px 0;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-height: 293px;
   img{
       width: 100%
   };
   .text{
       font-size: 17px;
   };
   .info{
       background-color: #dddddd;
       margin: 3px;
       .price{
           
           span{
               margin: 0;
               padding: 5px;
           }
           .new{
               color: red;
               font-size: 16px;
               font-weight: bold;
           };
           .old{
               text-decoration: line-through;
               font-size: 10px;
               margin-left: 10px;
           }
       };
       .price-cell{
           display: flex;
           font-size: 10px;
           margin-left: 8px;
           justify-content: space-between
       }
   } 
}
</style>